<template>

	<view>
		<view class="custom-nav">
			<view class="top">
				<image class="xx" src="/static/images/消息中心.png" mode=""></image>
				<view class="nav-title">首页</view>
			</view>
			<view class="ss">
				<image class="dw" src="/static/images/定位2.png" mode=""></image>
				<input class="in" type="text" />
				<image class="sx" src="/static/images/刷新 (1).png" mode=""></image>
				<text class="text">刷新</text>
			</view>
		</view>

		<view style="margin: 0 10px;">
			<uni-grid class="dh" :column="4" :highlight="true" @change="change" :show-border="false">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<navigator :url="item.url" class="grid-item-box">
						<view class="img" :style="{ 'background-color': item.color }">
							<image class="image" :src="item.src" />
						</view>
						<text class="text">{{item.text}}</text>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-card style="height: 300px;" title="附近加油站" sub-title="根据您的位置为您推荐最近的加油站" extra="更多">
			<view class="page-section page-section-gap">
				<map scale="16" :longitude="longitude" :latitude="latitude" class="map" :markers="markers"
					@markertap="mkp" show-compass show-location></map>
			</view>
		</uni-card>
		<!-- 	<view class="page-body">
			<view class="top">
				<view style="font-size: 20px;">附近加油站</view>
				<view style="font-size: 10px;">根据您的位置为您推荐最近的加油站</view>
			</view>
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view> -->
		<view>
			<uni-card title="优惠团购" sub-title="钜惠来袭 为您的爱车续航" extra="更多">
				<view style="display: flex; justify-content: space-between;">
					<view class="nav_r">
						<image class="wz_css" src="/static/images/头像.jpg" mode=""></image>
					</view>
					<view class="nav_r">
						<image class="wz_css" src="/static/images/头像.jpg" mode=""></image>
					</view>
				</view>
				<br />
				<view style="display: flex; justify-content: space-between;">
					<view class="nav_r">
						<image class="wz_css" src="/static/images/头像.jpg" mode=""></image>
					</view>
					<view class="nav_r">
						<image class="wz_css" src="/static/images/头像.jpg" mode=""></image>
					</view>
				</view>
			</uni-card>
		</view>
		<navigator url="/pages/relief/relief" class="jiuyvan">
			<image style="width: 20px; height: 20px;margin-top: 12px;margin-left: 16px;" src="/static/images/示警.png"
				mode=""></image>
		</navigator>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				distanceFromHere: 0,
				markers: [{
						id: 0,
						latitude: 0,
						longitude: 0,
						width: 15,
						height: 15,
						callout: {
							content: "当前位置",
							color: "#fff",
							bgColor: '#000',
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					},
					{
						id: 999,
						latitude: 34.826128,
						longitude: 113.558902,
						width: 15,
						height: 15,
						iconPath: '/static/home/maps/location.png',
						title: '华蓝集团',
						rating: '⭐⭐⭐⭐⭐   5分',
						info: '营业时间：周一至周六  早上9:00-晚上22:00',
						location: '位置:山阳区人民路与解放路交叉口',
						phone: '18912345678',
						callout: {
							color: "#fff",
							bgColor: '#000',
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					},
					{
						id: 1,
						latitude: 34.826622,
						longitude: 113.556722,
						width: 15,
						height: 15,
						iconPath: '/static/home/maps/location.png',
						title: '建华北京烤鸭',
						rating: '⭐⭐⭐⭐⭐   5分',
						info: '营业时间：周一至周日  早上8:00-晚上18:00',
						location: '位置:山阳区人民路与解放路交叉口',
						phone: '18912345678',
					},
					{
						id: 2,
						latitude: 34.824521,
						longitude: 113.557732,
						width: 15,
						height: 15,
						iconPath: '/static/home/maps/location.png',
						title: '郑州德析检测技术有限公司',
						rating: '⭐⭐⭐   3分',
						info: '营业时间：周一至周五  早上8:00-晚上22:00',
						location: '位置:山阳区人民路与解放路交叉口',
						phone: '18912345678',
					},
					{
						id: 3,
						latitude: 34.827359,
						longitude: 113.557851,
						iconPath: '/static/home/maps/location.png',
						width: 15,
						height: 15,
						title: '肿瘤医院',
						rating: '⭐⭐⭐⭐   4分',
						info: '营业时间：周一至周日  早上0:00-晚上24:00',
						location: '位置:山阳区人民路与解放路交叉口',
						phone: '18912345678',
					},
					{
						id: 4,
						latitude: 34.827537,
						longitude: 113.557854,
						iconPath: '/static/home/maps/location.png',
						width: 15,
						height: 15,
						title: '顺丰驿站',
						rating: '⭐⭐⭐⭐   4分',
						info: '营业时间：周一至周日  早上8:00-晚上20:30',
						location: '位置:山阳区人民路与解放路交叉口',
						phone: '18912345678',
					},
					// 1. 中国石化(莲花街加油站) - 莲花街与雪松路交叉口西北角
					{
					  id: 5,
					  latitude: 34.828459, 
					  longitude: 113.557800,
					  iconPath: '/static/home/maps/location.png',
					  width: 15,
					  height: 15,
					  title: '中国石化(莲花街站)',
					  rating: '⭐⭐⭐⭐⭐ 4.8分',
					  info: '营业时间：24小时',
					  location: '位置:莲花街与雪松路交叉口西北角',
					  phone: '0371-67890123'
					},
					
					// 2. 中国石油(雪松路加油站) - 雪松路与枫林路交叉口
					{
					  id: 6,
					  latitude: 34.826543,
					  longitude: 113.548712,
					  iconPath: '/static/home/maps/location.png',
					  width: 15,
					  height: 15,
					  title: '中国石油(雪松路站)',
					  rating: '⭐⭐⭐⭐ 4.5分',
					  info: '营业时间：6:00-23:00',
					  location: '位置:雪松路与枫林路交叉口南200米',
					  phone: '0371-67895678'
					},
					
					// 3. 大桥石化(长椿路站) - 长椿路与药厂街交叉口
					{
					  id: 7,
					  latitude: 34.835621,
					  longitude: 113.536782,
					  iconPath: '/static/home/maps/location.png',
					  width: 15,
					  height: 15,
					  title: '大桥石化(长椿路站)',
					  rating: '⭐⭐⭐⭐ 4.2分',
					  info: '营业时间：6:30-22:30',
					  location: '位置:长椿路与药厂街交叉口东北侧',
					  phone: '0371-67893456'
					},
					
					// 4. 壳牌加油站(红松路站) - 红松路与莲花街交叉口
					{
					  id: 8,
					  latitude: 34.829876,
					  longitude: 113.539812,
					  iconPath: '/static/home/maps/location.png',
					  width: 15,
					  height: 15,
					  title: '壳牌加油站(红松路站)',
					  rating: '⭐⭐⭐⭐ 4.3分',
					  info: '营业时间：7:00-21:00',
					  location: '位置:红松路与莲花街交叉口西100米',
					  phone: '0371-67894567'
					},
					
					// 5. 民营加油站(莲花街东站) - 莲花街与绕城高速交叉口
					{
					  id: 9,
					  latitude: 34.833456,
					  longitude: 113.527891,
					  iconPath: '/static/home/maps/location.png',
					  width: 15,
					  height: 15,
					  title: '莲花街东加油站',
					  rating: '⭐⭐⭐ 3.9分',
					  info: '营业时间：7:00-20:00',
					  location: '位置:莲花街与绕城高速交叉口东南角',
					  phone: '0371-67891234'
					}
					// 其他marker数据...
				],
				dynamicList: [],
				list: [{
						src: '/static/images/车辆维修1-01.png',
						text: '车辆维修',
						color: "#4A75F6",
						url: "/pages/index/cheliangweixiu/cheliangweixiu"
					},
					{
						src: '/static/images/保养.png',
						text: '汽车保养',
						color: '#FFAC39',
						url: "/pages/index/baoyang/baoyang"
					},
					{
						src: '/static/images/洗车.png',
						text: '专业洗车',
						color: '#5EDC2A',
						url: "/pages/index/xiche/xiche"

					},
					{
						src: '/static/images/加油枪 (1).png',
						text: '就近加油',
						color: "#6faeff",
						url: "/pages/index/reful/reful"
					}
				],
			}
		},
		methods: {
			change(e) {
				// let {
				// 	index
				// } = e.detail
				// this.list[index].badge && this.list[index].badge++

				// uni.showToast({
				// 	title: `点击第${index+1}个宫格`,
				// 	icon: 'none'
				// })
			},
			mkp(e) {
				this.info = this.markers.find(obj => obj.id == e.detail.markerId);
				const lat1 = this.latitude;
				const lon1 = this.longitude;
				const lat2 = this.info.latitude;
				const lon2 = this.info.longitude;
				const distance = this.calculateDistanceInMeters(lat1, lon1, lat2, lon2);
				this.distanceFromHere = distance.toFixed(2);
				console.log(`距离: ${distance.toFixed(2)} 米`);
			},
			calculateDistanceInMeters(lat1, lon1, lat2, lon2) {
				const R = 6371000;
				const dLat = this.degToRad(lat2 - lat1);
				const dLon = this.degToRad(lon2 - lon1);
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.degToRad(lat1)) * Math.cos(this.degToRad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				return R * c;
			},
			degToRad(deg) {
				return deg * (Math.PI / 180);
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('坐标信息', res);
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						// 更新当前位置marker
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
					},
					fail: (err) => {
						console.error('获取位置失败', err);
					}
				});
			},
			choose() {
				uni.chooseLocation({
					success: (res) => {
						console.log('点击获取到了实时位置', res);
					}
				});
			}
		},
		onLoad() {
			this.getLocation();
		}

	}
</script>

<style scoped>
	.jiuyvan {
		width: 51px;
		height: 51px;
		background-color: red;
		position: fixed;
		bottom: 20px;
		/* 固定在页面底部 */
		left: 50%;
		/* 固定在页面右侧 */
		transform: translate(-50%);
		z-index: 9999;
		/* 确保在其他元素之上 */
		border-radius: 25px;
	}


	.custom-nav {
		width: 100%;
		padding-bottom: 40px;
		background: url(../../../static/images/图层 1.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.nav-bg {
		width: 100%;
		height: 100%;
	}

	.nav-title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}

	/* 	.top{
		display: flex;
	} */

	.xx {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.ss {
		display: flex;
		margin: 20px;
		background-color: white;
		height: 30px;
		border-radius: 15px;
		line-height: 20px;
	}

	.ss .dw {
		position: absolute;
		margin-top: 8px;
		margin-left: 15px;
		width: 15px;
		height: 15px;
	}

	.ss .sx {
		position: absolute;
		right: 80px;
		margin-top: 8px;
		width: 15px;
		height: 15px;
	}

	.ss .in {
		margin-top: 14px;
		margin-left: 50px;
		width: 70%;
	}

	.ss .text {
		margin-top: 5px;
		margin-left: 10px;
		color: blue;
		font-size: 12px;
	}

	.dh {
		margin-top: -40px;
		background-color: #fff;
		border-radius: 20px;
	}

	.page-body {
		margin: 20px;
		background-color: #fff;
	}

	.page-body .top {
		height: 50px;
		padding-top: 20px;
	}

	.nav_r {
		width: 48%;
		height: 220rpx;
	}
	
	.wz_css {
		width: 100%;
		height: 100%;
		border-radius: 15px;
	}

	.dh .img {
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background-color: skyblue;
	}

	.dh .image {
		margin-top: 10px;
		margin-left: 7px;
		width: 26px;
		height: 20px;
	}

	.dh .text {
		font-size: 14px;
		margin-top: 5px;
	}

	.dh .grid-item-box {
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.img{
		margin: 0 auto;
	}

	.map {
		width: 100%;
		height: 700rpx;
	}

	.card {
		display: flex;
	}

	.merchant {
		width: 74%;
		font-size: 12px;
		color: black;
		margin: 15px 0;
	}

	.merchant-name {
		font-size: 16px;
		font-weight: 600;
		margin: 15px 0 5px 0;
	}
</style>